{% extends "main.tpl" %}
{% block stylesheets %}
	<!-- Additional styles -->
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/form.css?v=1">
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/switches.css?v=1">  
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/table.css?v=1">
	<link rel="stylesheet" href="{{ stylesheet_path }}styles/modal.css?v=1">
    <!-- DataTables -->
	<link rel="stylesheet" href="{{ javascript_path }}libs/DataTables/jquery.dataTables.css?v=1">
{% endblock %}
{% block content_title %}Pages{% endblock %}
{% block content %}

<div class="with-padding">
	<p>Add, edit and delete pages. You can also sort them/</p>
    <a href="#" id="add_page" class="button margin-bottom">Create page</a>
    <div class="carbon with-padding margin-bottom">
		<div class="boxed white-bg">
            <ol class="sortable" max-depth="4">
            {{ tpl_page_list(pages) }}                
            </ol>
		</div>
    </div>
</div>
<form id="add_form" action="{{ cms_url('pages/add') }}" method="post" style="display:none">
    <input type="text" name="page_name" />
    <input type="hidden" name="page_parent" value="0" />
    <input type="hidden" name="{{ csrf_token }}" value="{{ csrf_hash }}" />            
</form>        

        <style type="text/css">.placeholder {
			background-color: #cfcfcf;
		}
ol {
			margin: 0;
			padding: 0;
			padding-left: 30px;
			
		}

		ol.sortable, ol.sortable ol {
			margin: 5px 0 0 30px;
			padding: 0;
			list-style-type: none;
		}

		ol.sortable {
			margin: 2px 0;
		}

		.sortable li {
			margin: 5px 0 0 0;
			padding: 0;
		}

		.sortable li div  {
			font-size:16px;
			line-height:20px;
			height:25px;
			cursor: move;
			padding-left:20px;
		}
</style>

{% endblock %}
{% block javascripts %}

	<!-- Template functions -->
	<script src="{{ javascript_path }}developr.input.js"></script>
	<script src="{{ javascript_path }}developr.navigable.js"></script>
	<script src="{{ javascript_path }}developr.notify.js"></script>
	<script src="{{ javascript_path }}developr.scroll.js"></script>
	<script src="{{ javascript_path }}developr.tooltip.js"></script>
	<script src="{{ javascript_path }}developr.table.js"></script>
	<script src="{{ javascript_path }}developr.tabs.js"></script>
	<script src="{{ javascript_path }}developr.confirm.js"></script>
	<script src="{{ javascript_path }}developr.modal.js"></script>

	<script src="{{ javascript_path }}libs/jquery.nestedSortable.js"></script>


<script type="text/javascript">
$(function(){
	
		// Create group
		$('#add_page').click(function(e) {
            e.preventDefault();
			$.modal.prompt('Enter page name:', function(Name){
					var form = $('#add_form');
					form.find('[name=page_name]').val(Name);
					form.submit();				
			});
        });
			
	$('ol.sortable').each(function(){
		var $sortable = $(this);
		var max_depth = $sortable.attr('max-depth');
		$sortable.nestedSortable({
			disableNesting: 'no-nest',
			forcePlaceholderSize: true,
			handle: 'div',
			helper:	'clone',
			items: 'li',
			maxLevels: max_depth,
			opacity: .6,
			placeholder: 'placeholder',
			revert: 250,
			tabSize: 25,
			tolerance: 'pointer',
			toleranceElement: '> div',
			update: function(event, ui)
			{
				var array = $(this).nestedSortable('toArray', {startDepthCount: 0});
				$.post('{{ cms_uri }}/pages/sort', { 
					sortdata : array, 
					'{{ csrf_token }}': '{{ csrf_hash }}' 
				}, function(data){  
					notify('Pages sorted', 'The pages are sorted',{
					                            icon: '{{ image_path }}demo/picto.png',
					                            showCloseOnHover: false
					                        });				
				});
			}
			
			
		});
		
		
	});
});
</script>	

{% endblock %}

</body>
</html>